<template>
  <div>
      <Form layout="inline">
        <FormItem label="规则名称">
          <Input v-model:value="name" placeholder="请输入" :style="{ width: '270px' }"></Input>
        </FormItem>
        <FormItem label="路由链路">
          <Select
            v-model:value="routeLinkKeys"
            mode="multiple"
            :options="routerLinkList"
            placeholder="请选择"
            :style="{ width: '270px' }"
          ></Select>
        </FormItem>
        <div>
            <Tooltip title="查询">
                <Button type="primary" @click="search" shape="circle"><template #icon><SearchOutlined /></template></Button>
            </Tooltip>
            <Tooltip title="重置">
          <Button style="margin-left: 10px" @click="reset" shape="circle"><template #icon><ReloadOutlined /></template></Button>
            </Tooltip>
        </div>
      </Form>
  
  </div>
</template>
<script lang="ts" setup>
import {  Form, FormItem, Input, Button, Select,Tooltip } from 'ant-design-vue';
import { SearchOutlined,ReloadOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { routeLinkItem } from '/@/api/upgrade-center/grayscale/ruleManagement/model/ruleManagementModel';
import { getRouteLink } from '/@/api/upgrade-center/grayscale/ruleManagement/ruleManagement';
const name = ref<string>();
const routerLinkList = ref();
const getData=async ()=>{
    routerLinkList.value = await getRouteLink();
}
getData();
const routeLinkKeys = ref<routeLinkItem[]>();
//查询
const emit = defineEmits(['get'])
const search = () => {
   emit('get',{name:name.value,routeLinkKeys:routeLinkKeys.value});
};
//重置
const reset = () => {
    name.value = undefined;
    routeLinkKeys.value = [];
    emit('get',{name,routeLinkKeys});
};
</script>
<style lang="less">

</style>
